<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Our Love Story</title>
	<style type="text/css">
		@font-face {
			font-family: dight;
			src: url('digital-7_mono.ttf');
		}
	</style>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/garden.js"></script>
	<script type="text/javascript" src="js/function.js"></script>
</head>
<body>
	<div id="mainDiv">
		<div id="content">
			<div id="code">
				<span class="comments">/**</span><br/>
				<span class="space"/><span class="comments">* I am a programmer.</span><br />
				<span class="space"/><span class="comments">* so I write some code to describe our stories.</span><br />
				<span class="space"/><span class="comments">*/</span><br />
				Boy i = <span class="keyword">new</span> Boy(<span class="string">"YangHuoHuo"</span>);<br />
				Girl u = <span class="keyword">new</span> Gril(<span class="string">"LiBeiBei"</span>);<br />
				<span class="comments">// MAR 11, 2018, I told you I love you. </span><br />
				i.love(u);<br />
				<span class="comments">// Unfortunately, You rejected me.</span><br />
				u.rejected();<br />
				<span class="comments">// But,luckily, the next day, You accepted me.</span><br />
				u.accepted();<br />
				<span class="comments">// Since then, I see u every day.</span><br />
				i.see(u);<br />
				<span class="comments">// And take care of u and our love.</span><br />
				i.takeCareOf(u);<br />
				<span class="comments">// First time, holding hands, kissing, watching movies,trip, eating big mouth cat...</span><br />
				<span class="comments">// Even ...... Have a baby(you call him Pig-Baby,lovely name.)</span><br />
				Baby pig_baby = i.with(u);<br />
				<!-- <span class="comments">// Even ...... Have a baby(you call him Pig-Baby,lovely name.)</span><br /> -->
				<span class="keyword">var</span> time = <span class="keyword">the rest of life</span>;<br />
				<span class="keyword">while</span> (i < time) {<br />
				<span class="placeholder"/>i.love(u);<br />
				<span class="placeholder"/><span class="comments">// I think it is a thousand years</span><br />
				<span class="placeholder"/>time = i.wish(a thousand years);<br />
				}<br />
				<span class="comments">// At last, maybe one day, after a romantic wedding, we will live happily ever after.</span><br />
				u.marry(me);<br />
				i.liveHappilyWith(u);<br />
			</div>
			<div id="loveHeart">
				<canvas id="garden"></canvas>
				<div id="words">
					<div id="messages">
						LiBeiBei, I have fallen in love with you for
						<div id="elapseClock"></div>
					</div>
					<div id="loveu">
						Love u forever and ever.<br/>
						<div class="signature">- YangHuoHuo</div>
					</div>
				</div>
			</div>
		</div>
		<div id="copyright">
			<!-- <audio src="Vagrant.mp3" controls="controls"> </audio>autoplay="autoplay">
				Your browser does not support the audio element.
			</audio> -->
			I love you not because of who you are, but because of who I am when I am with you.<br />
			To the world you may be one person, but to me you may be the world.</a>
		</div>
	</div>
	<script type="text/javascript">
		let offsetX = $("#loveHeart").width() / 2;
		let offsetY = $("#loveHeart").height() / 2 - 55;
		let together = new Date();
		together.setFullYear(2018, 2, 12); //2018/3/12
		together.setHours(20);
		together.setMinutes(0);
		together.setSeconds(0);
		together.setMilliseconds(0);
		if (!document.createElement('canvas').getContext) {
			let msg = document.createElement("div");
			msg.id = "errorMsg";
			msg.innerHTML = "Your browser doesn't support HTML5!";
			document.body.appendChild(msg);
			$("#code").css("display", "none");
		} else {
			setTimeout(function() {
				startHeartAnimation();
			}, 5000);

			timeElapse(together);

			adjustCodePosition();
			$("#code").typewriter(); // 打字效果
		}
	</script>
	<script>
		music.play(); 
	</script>
</body>
</html>
